<template>
    <div>
        <div class="box">

            <el-row :gutter="40">
                <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" v-for="(item,index) in tabs" :key="index">
                    <div class="box1" :class="{active:tabIndex==index}" :style="item.background" @mouseenter="enterBox(index)" @mouseleave="leaveBox">
                        <div>
                            <h1>{{item.num}}</h1>
                            <i :class="item.class"></i>
                            <span>{{item.name}}</span>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>

    </div>
</template>
<script>
import { home } from "@/utils/API";

export default {
  data() {
    return {
      tabs: [
        {
          num: 1391,
          name: "用户总数",
          class: "el-icon-user",
          background: {
            background: "#f0b45e"
          }
        },
        {
          num: 4526,
          name: "商品总数",
          class: "el-icon-s-operation",
          background: {
            background: "#6bbe6b"
          }
        },
        {
          num: 4526,
          name: "商品总数",
          class: "el-icon-star-on",
          background: {
            background: "#5db8d2"
          }
        }
      ],
      tabIndex: -1
    };
  },
  methods: {
    enterBox(i) {
      this.tabIndex = i;
      //   console.log(tabIndex);
    },
    leaveBox() {
      this.tabIndex = -1;
    }
  },
  mounted() {
    home().then(res => {
      console.log(res);
      this.tabs[0].num = res.orderCount
      this.tabs[1].num = res.productCount
      this.tabs[2].num = res.userCount
    });
  }
};
</script>
<style lang="scss" scoped>
.box {
  width: 80%;

  margin: 100px auto;
}
.box1 {
  padding-top: 20px;
  text-align: center;
  color: #ffffff;
  line-height: 80px;
  transition: all .5s;
  h1 {
    font-size: 50px;
  }
  span {
    font-size: 20px;
  }
}
.active {
  transform: scale(1.1, 1.1);
  color: #000;
}
</style>
